<template>
	<view class="page-card-view">
		<view class="card-title">
			<view class="title">健康知识</view>
			<view class="more-btn" @click="navToTopNewsList('健康知识')">
				查看更多
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
		</view>
		<view class="tab-view">
			<view class="grid-tab-view">
				<view @click="changeHealthKnowledgeTab(index)"
					:class="index === healthKnowledgeTabCurrent ? 'grid-tab-item-selected': ''" class="grid-tab-item"
					v-for="(item,index) in healthKnowledgeTabs" :key="index">
					<image class="icon" :src="item.selectedIcon" v-if="index === healthKnowledgeTabCurrent" />
					<image class="icon" :src="item.icon" v-else />
					<view class="title">{{item.title}}</view>
				</view>
			</view>
			<v-tabs ref="healthKnowledgeSubTab" :bold="false" color="#383838" activeColor="#30B18D" lineHeight="1px"
				lineColor="#30B18D" activeFontSize="28rpx" fontSize="28rpx" :zIndex="0"
				v-model="healthKnowledgeSubTabCurrent" :tabs="healthKnowledgeSubTabs" field='classifyName'
				@change="changeHealthKnowledgeSubTab">
			</v-tabs>
		</view>
		<view class="health-knowledge-grid-view">
			<view class="health-knowledge-grid-item" v-for="item in knowledgeList" :key="item.uid"
				@click="goDetails(item)">
				<image :src="item.coverFileName" class="cover-img"></image>
				<view class="title-and-date">
					<view class="title">{{item.titleName}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as queryData from '../../common/api/index.js'
	export default {
		data() {
			return {
				healthKnowledgeTabCurrent: 0,
				//'健康素养', '公共卫生', '疾病常识', '妇幼保健', '慢病防治', '心理健康', '中医养生', '公共安全'
				healthKnowledgeTabs: [{
						title: '健康素养',
						icon: '/static/img/health_tab_icon_1.png',
						selectedIcon: '/static/img/health_tab_selected_icon_1.png',
						code: '4-1-jksy'
					},
					{
						title: '公共卫生',
						icon: '/static/img/health_tab_icon_2.png',
						selectedIcon: '/static/img/health_tab_selected_icon_2.png',
						code: '4-2-ggws'
					},
					{
						title: '疾病常识',
						icon: '/static/img/health_tab_icon_3.png',
						selectedIcon: '/static/img/health_tab_selected_icon_3.png',
						code: '4-3-jbcs'
					},
					{
						title: '妇幼保健',
						icon: '/static/img/health_tab_icon_4.png',
						selectedIcon: '/static/img/health_tab_selected_icon_4.png',
						code: '4-4-fybj'
					},
					{
						title: '慢病防治',
						icon: '/static/img/health_tab_icon_5.png',
						selectedIcon: '/static/img/health_tab_selected_icon_5.png',
						code: '4-5-mbfz'
					},
					{
						title: '心理健康',
						icon: '/static/img/health_tab_icon_6.png',
						selectedIcon: '/static/img/health_tab_selected_icon_6.png',
						code: '4-6-xljk'
					},
					{
						title: '中医养生',
						icon: '/static/img/health_tab_icon_7.png',
						selectedIcon: '/static/img/health_tab_selected_icon_7.png',
						code: '4-7-zyys'
					},
					{
						title: '公共安全',
						icon: '/static/img/health_tab_icon_8.png',
						selectedIcon: '/static/img/health_tab_selected_icon_8.png',
						code: '4-8-ggaq'
					},
				],
				healthKnowledgeSubTabCurrent: 0,
				healthKnowledgeSubTabs: ['健康知识', '合理膳食', '适量行动', '戒烟戒酒', '健康技能', '其他'],
				knowledgeList: [],
			}
		},
		methods: {
      goDetails(data) {
      	uni.navigateTo({
      		url: "/pages/details/details?uid=" + data.uid
      	})
      },
			navToTopNewsList(e) {
				uni.navigateTo({
					url: "/pages/healthKnowledge/healthKnowledge?classifyName=" + e
				})
			},
			changeHealthKnowledgeTab(e) {
				this.healthKnowledgeTabCurrent = e
				this.healthKnowledgeSubTabCurrent = 0
				// const tabs = [
				// 	['健康知识', '合理膳食', '适量行动', '戒烟戒酒', '健康技能', '其他'],
				// 	['新冠肺炎', '传染病预防', '预防接种', '地方病预防', '职业健康', '环境健康', '其他'],
				// 	['呼吸系统疾病', '循环系统疾病', '泌尿系统疾病', '生殖系统疾病', '消化系统疾病', '运动系统疾病', '内分泌系统疾病', '神经系统疾病', '口腔健康', '康复护理',
				// 		'其他'
				// 	],
				// 	['儿童保健', '妇女保健', '孕产保健', '其他'],
				// 	['高血压', '高血脂', '糖尿病', '脑猝中', '慢阻肺', '哮喘', '其他'],
				// 	['心理疾病', '儿童青少年心理', '婚姻家庭', '社会关系', '老年心理', '其他'],
				// 	['中医知识', '非药物疗法', '情志养生', '时令养生', '起居养生', '运动养生', '饮食养生', '其他'],
				// 	['急救知识', '事故灾害', '其他'],
				// ]
				//this.healthKnowledgeSubTabs = tabs[e]
				let param = {
					code: this.healthKnowledgeTabs[e].code
				}
				queryData.queryTreeByCode(param).then(res => {
					this.healthKnowledgeSubTabs = res.data.data
					this.changeHealthKnowledgeSubTab(0)
				}).catch(error => {
					console.log(error)
				})
				this.subTabScrollLeft = 0
			},
			changeHealthKnowledgeSubTab(e) {
				this.healthKnowledgeSubTabCurrent = e
				let item = this.healthKnowledgeSubTabs[e]
				this.getKnowledgeList(item.uid)
			},
			getKnowledgeList(classifyUid) {
				const param = {
					pageIndex: 1,
					pageSize: 4,
					positionsOne: '首页',
					classifyUid: classifyUid
				}
				queryData.queryByPage(param).then(res => {
					this.knowledgeList = res.data.data.rows
				}).catch(error => {
					console.log(error)
				})
			},
		},
		mounted() {
			this.changeHealthKnowledgeTab(0)
			this.changeHealthKnowledgeSubTab(0)
		}
	}
</script>

<style lang="scss" scoped>
	.page-card-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		background: white;

		.card-title {
			width: 100%;
			display: flex;
			padding: 30rpx;
			box-sizing: border-box;
			align-items: center;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #383838;
				flex: 1;
			}

			.more-btn {
				display: flex;
				font-size: 24rpx;
				color: #808080;
			}
		}
	}

	.tab-view {
		width: 100%;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.grid-tab-view {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(auto-fit, calc(100% / 3 - 20rpx));
			grid-column-gap: 20rpx;
			grid-row-gap: 20rpx;

			.grid-tab-item {
				width: 100%;
				height: 60rpx;
				border-radius: 10rpx;
				background: rgba(48, 177, 141, 0.05);
				display: flex;
				align-items: center;
				justify-content: space-around;

				.icon {
					width: 32rpx;
					height: 32rpx;
				}

				.title {
					font-size: 24rpx;
					color: #30B18D;
				}
			}

			.grid-tab-item-selected {
				background: #30B18D;

				.title {
					color: white;
				}
			}
		}
	}

	.health-knowledge-grid-view {
		width: 100%;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(auto-fit, calc(100% / 2 - 20rpx));
		grid-template-rows: repeat(auto-fit, 280rpx);
		grid-row-gap: 20rpx;
		grid-column-gap: 20rpx;

		.health-knowledge-grid-item {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			border-radius: 10rpx;
			overflow: hidden;
			background: white;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);

			.cover-img {
				width: 100%;
				height: 230rpx;
			}

			.title-and-date {
				display: flex;
				flex-direction: column;
				padding-left: 10rpx;

				.title {
					font-size: 24rpx;
					color: #303133;
					font-weight: bold;
				}

				.date {
					font-size: 20rpx;
					color: #808080;
				}
			}
		}
	}
</style>